<template>
  <el-dialog v-model="dialogVisibleLocal" width="42.5rem" :style="{ borderRadius: '10px', padding: '0' }"
    :show-close="false" :show-header="false" class="practice-dialog">
    <div class="practice-container flex">
      <div class="leftBox">
        <div class="dialogTitle">顺序练习</div>
        <div class="practiceInfo marT30">
          <div class="flex flex-justify-between flex-align-center">
            <div class="flex flex-align-center">
              <img :src="userStore.storeInfo.avatar" alt="" class="headerPic" />
              <div>
                <div class="marL20 phone">{{ userStore.storeInfo.memberName }}</div>
                <div class="marL20 f18 marT20">{{ userStore.storeInfo.mobile }}</div>
              </div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div>
                <span class="f45">{{ statisticsData.accuracyRate || 0 }}</span>
                <span class="f25">%</span>
              </div>
              <div class="f20 marT15">预测通过率</div>
            </div>
          </div>
          <div class="practiceTime marT30">上次练习时间：{{ statisticsData.lastPracticeTime &&
            statisticsData.lastPracticeTime.slice(0, 16) }}</div>
        </div>
        <div class="doingPractice marT30">
          <div style="display: grid; grid-template-columns: repeat(4, 1fr)">
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">
                {{ statisticsData.totalQuestionCount - statisticsData.answeredQuestionCount }}
              </div>
              <div class="practiceTitle marT10">未做题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">{{ statisticsData.wrongQuestionCount || 0 }}</div>
              <div class="practiceTitle marT10">错题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div class="practiceNum">{{ statisticsData.collectedCount || 0 }}</div>
              <div class="practiceTitle marT10">收藏题</div>
            </div>
            <div class="flex flex-column flex-align-center">
              <div>
                <span class="practiceNum">{{ statisticsData.accuracyRate || 0 }}</span>
                <span class="unit">%</span>
              </div>
              <div class="practiceTitle marT10">正确率</div>
            </div>
          </div>
          <div class="flex flex-align-center flex-justify-center exercises">
            <div class="continue" @click="toOrder">继续练习</div>
          </div>
        </div>
      </div>
      <!-- <div class="rightBox flex flex-column flex-align-center">
        <div class="downTitle">下载绿通驾考APP</div>
        <div class="gettips">获取手机版专享特权</div>
        <img src="@/assets/img/ewm1.png" alt="" class="ewmPic" />
        <div class="fh25 marT20">绿通驾考APP</div>
        <div class="unit marT5">支持平台：Android、iOS</div>
        <img src="@/assets/img/ewm2.png" alt="" class="ewmPic" />
        <div class="fh25">微信小程序</div>
        <div class="unit marT5">直接体验，无需下载</div>
      </div> -->
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import '../home.scss'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
const router = useRouter()

const userStore = useUserStore()
const props = defineProps<{
  statisticsData: {
    type: Object
    default: () => {}
  }
  dialogVisible: boolean
}>()
const statisticsData = ref<any>(props.statisticsData)

const emit = defineEmits(['update:dialogVisible'])
const toOrder = () => {
  router.push({
    name: 'order',
  })
}
const dialogVisibleLocal = ref(props.dialogVisible)
watch(
  () => props.dialogVisible,
  (val) => (dialogVisibleLocal.value = val),
)
watch(dialogVisibleLocal, (val) => emit('update:dialogVisible', val))
</script>
<style lang="scss" scoped>
@use './dialog.scss';
</style>
